<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>飘窗</title>
	</head>
	<style>
		#roll {
		    height: 200px;
		    width: 200px;
		    position: fixed; /*fixed实现绝对定位*/
		    cursor:pointer;
		}
		#roll img{
		    height: 200px;
		    width: 200px;
		    
		}
	</style>
	<body>
		<!--飘窗-->
		<div id="roll">
		      <img src="https://source.unsplash.com/random/800x600">
		</div>
		
		<script>
			var ggRoll={                                     //创建对象直接量
			  roll:document.getElementById("roll"),          //获取id属性为roll的对象
			  speed:20,                                      //飘动速度，即为定时器函数多长时间执行一次
			  statusX:1,                                     //规定每执行一次函数，left属性值变化的幅度
			  statusY:1,                                     //规定每执行一次函数，top属性值变化的幅度
			  x:100,                                         //规定初始状态下left属性的值
			  y:300,                                         //规定初始状态下top属性的值
			  //差值用来测算left属性值的极限
			  winW:document.documentElement.clientWidth-document.getElementById("roll").offsetWidth, 
			  //差值用来测算top属性值的极限
			  winH:document.documentElement.clientHeight-document.getElementById("roll").offsetHeight, 
			  //声明函数
			  Go: function () {                                                               
			       //设置div的left属性值
			       this.roll.style.left = this.x + 'px';                                      
			       //设置div的top属性值
			       this.roll.style.top = this.y + 'px';                                       
			       //如果statusX=1则每次减少1px,否则减少1px
			       this.x = this.x + (this.statusX ? -1 : 1)                                  
			       //如果left属性值小于0，也就是div要超出左边界了，就将statusX设置为0
			       if (this.x < 0) { this.statusX = 0 }                                       
			       //如果top属性值大于winW，也就是div要超出右边界了，就将statusX设置为1
			       if (this.x > this.winW) { this.statusX = 1 }                               
			 
			       this.y = this.y + (this.statusY ? -1 : 1)
			       if (this.y < 0) { this.statusY = 0 }
			       if (this.y > this.winH) { this.statusY = 1 }
			 
			     }
			  };
			 
			var interval=setInterval("ggRoll.Go()",ggRoll.speed);
			ggRoll.roll.οnmοuseοver=function(){clearInterval(interval)};                     //onmouseover属性：鼠标移动到元素上时触发
			ggRoll.roll.οnmοuseοut=function(){interval=setInterval("ggRoll.Go()",ggRoll.speed)};//onmouseout属性:鼠标离开元素
		</script>
	</body>
</html>